<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ETF基金排行榜</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
    <style>
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
            background-color: #f8f9fa;
        }
        .container {
            margin-top: 20px;
        }
        .card {
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
        .card-header {
            background-color: #007bff;
            color: white;
            font-weight: 600;
        }
        .btn-primary {
            background-color: #007bff;
            border-color: #007bff;
        }
        .btn-primary:hover {
            background-color: #0056b3;
            border-color: #0056b3;
        }
        .table {
            border-radius: 6px;
            overflow: hidden;
        }
        .table thead {
            background-color: #f8f9fa;
        }
        .table td {
            vertical-align: middle;
        }
        .positive {
            color: #dc3545;
        }
        .negative {
            color: #28a745;
        }
        .form-control:focus {
            border-color: #007bff;
            box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
        }
        .loading-overlay {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: rgba(0, 0, 0, 0.5);
            z-index: 9999;
            justify-content: center;
            align-items: center;
        }
        .loading-content {
            background-color: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="card">
            <div class="card-header">
                ETF基金排行榜
            </div>
            <div class="card-body">
                <div class="row mb-4">
                    <div class="col-md-6">
                        <button id="fetchBtn" class="btn btn-primary">
                            <i class="bi bi-download"></i> 抓取最新数据
                        </button>
                        <button id="refreshBtn" class="btn btn-secondary ms-2">
                            <i class="bi bi-arrow-clockwise"></i> 刷新数据
                        </button>
                    </div>
                    <div class="col-md-6">
                        <div class="input-group">
                            <input type="text" id="codeInput" class="form-control" placeholder="输入基金代码查询">
                            <button id="searchBtn" class="btn btn-primary">
                                <i class="bi bi-search"></i> 查询
                            </button>
                        </div>
                    </div>
                </div>
                
                <div class="table-responsive">
                    <table class="table table-striped table-hover">
                        <thead>
                            <tr>
                                <th>基金代码</th>
                                <th>基金名称</th>
                                <th>单位净值</th>
                                <th>近一周收益率(%)</th>
                                <th>近一月收益率(%)</th>
                                <th>近一年收益率(%)</th>
                                <th>成立日期</th>
                                <th>操作</th>
                            </tr>
                        </thead>
                        <tbody id="etfTableBody">
                            <!-- 数据将通过JavaScript动态加载 -->
                        </tbody>
                    </table>
                </div>
                
                <div id="emptyMessage" class="alert alert-info text-center" style="display: none;">
                    暂无数据，请点击"抓取最新数据"按钮获取数据
                </div>
            </div>
        </div>
    </div>
    
    <!-- 加载中遮罩 -->
    <div id="loadingOverlay" class="loading-overlay">
        <div class="loading-content">
            <div class="spinner-border" role="status">
                <span class="visually-hidden">加载中...</span>
            </div>
            <p class="mt-2">处理中，请稍候...</p>
        </div>
    </div>
    
    <script>
        $(document).ready(function() {
            // 初始加载数据
            loadETFData();
            
            // 抓取最新数据按钮点击事件
            $('#fetchBtn').click(function() {
                showLoading();
                $.ajax({
                    url: '/api/etf2/fetch',
                    type: 'POST',
                    success: function(data) {
                        hideLoading();
                        alert('成功抓取 ' + data + ' 条数据');
                        loadETFData();
                    },
                    error: function() {
                        hideLoading();
                        alert('抓取数据失败');
                    }
                });
            });
            
            // 刷新数据按钮点击事件
            $('#refreshBtn').click(function() {
                loadETFData();
            });
            
            // 查询按钮点击事件
            $('#searchBtn').click(function() {
                searchETF();
            });
            
            // 回车键查询
            $('#codeInput').keypress(function(e) {
                if (e.which === 13) {
                    searchETF();
                }
            });
        });
        
        // 加载ETF数据
        function loadETFData() {
            showLoading();
            $.ajax({
                url: '/api/etf2/list',
                type: 'GET',
                success: function(data) {
                    hideLoading();
                    updateTable(data);
                },
                error: function() {
                    hideLoading();
                    alert('加载数据失败');
                }
            });
        }
        
        // 搜索ETF
        function searchETF() {
            let code = $('#codeInput').val().trim();
            if (!code) {
                loadETFData();
                return;
            }
            
            showLoading();
            $.ajax({
                url: '/api/etf2/' + code,
                type: 'GET',
                success: function(data) {
                    hideLoading();
                    if (data) {
                        updateTable([data]);
                    } else {
                        alert('未找到该基金代码');
                    }
                },
                error: function() {
                    hideLoading();
                    alert('查询失败');
                }
            });
        }
        
        // 更新表格
        function updateTable(data) {
            let tbody = $('#etfTableBody');
            tbody.empty();
            
            if (data.length === 0) {
                $('#emptyMessage').show();
            } else {
                $('#emptyMessage').hide();
                
                data.forEach(function(etf) {
                    let row = $('<tr></tr>');
                    row.append('<td>' + (etf.code || '') + '</td>');
                    row.append('<td>' + (etf.name || '') + '</td>');
                    row.append('<td>' + (etf.nav || '') + '</td>');
                    row.append('<td class="' + (etf.weeklyReturn >= 0 ? 'positive' : 'negative') + '">' + 
                               (etf.weeklyReturn || '') + '</td>');
                    row.append('<td class="' + (etf.monthlyReturn >= 0 ? 'positive' : 'negative') + '">' + 
                               (etf.monthlyReturn || '') + '</td>');
                    row.append('<td class="' + (etf.yearlyReturn >= 0 ? 'positive' : 'negative') + '">' + 
                               (etf.yearlyReturn || '') + '</td>');
                    row.append('<td>' + (etf.establishDate ? formatDate(etf.establishDate) : '') + '</td>');
                    row.append('<td>' +
                               '<button class="btn btn-sm btn-outline-primary detailBtn" data-code="' + etf.code + '">详情</button> ' +
                               '<button class="btn btn-sm btn-outline-danger deleteBtn" data-code="' + etf.code + '">删除</button>' +
                               '</td>');
                    tbody.append(row);
                });
                
                // 绑定详情按钮事件
                $('.detailBtn').click(function() {
                    let code = $(this).data('code');
                    alert('查看基金代码 ' + code + ' 的详情');
                    // 这里可以跳转到详情页或显示详情模态框
                });
                
                // 绑定删除按钮事件
                $('.deleteBtn').click(function() {
                    let code = $(this).data('code');
                    if (confirm('确定要删除基金代码 ' + code + ' 的数据吗？')) {
                        deleteETF(code, $(this).closest('tr'));
                    }
                });
            }
        }
        
        // 删除ETF数据
        function deleteETF(code, row) {
            showLoading();
            $.ajax({
                url: '/api/etf2/' + code,
                type: 'DELETE',
                success: function(data) {
                    hideLoading();
                    if (data) {
                        row.remove();
                        alert('删除成功');
                        if ($('#etfTableBody tr').length === 0) {
                            $('#emptyMessage').show();
                        }
                    } else {
                        alert('删除失败');
                    }
                },
                error: function() {
                    hideLoading();
                    alert('删除失败');
                }
            });
        }
        
        // 显示加载中
        function showLoading() {
            $('#loadingOverlay').css('display', 'flex');
        }
        
        // 隐藏加载中
        function hideLoading() {
            $('#loadingOverlay').hide();
        }
        
        // 格式化日期
        function formatDate(dateString) {
            if (!dateString) return '';
            let date = new Date(dateString);
            return date.getFullYear() + '-' + 
                   String(date.getMonth() + 1).padStart(2, '0') + '-' + 
                   String(date.getDate()).padStart(2, '0');
        }
    </script>
</body>
</html>